<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
      body{
          /*min-width: 1200px;*/
          width: 100%;
      }
      div{
        -webkit-text-size-adjust: none;
        display: block;
    }
    .wz-header{
        width: 100%;
        background-color: #fff;
        height: 123px;
    }
    .wz-wrapper{
        width: 100%;
        margin: auto;
    }
    .wz-position{
        position: relative;
    }
    .wz-header .wz-logo{
        width: 202px;
        height: 43px;
        padding-top: 38px;
        padding-left: 32px;
    }
    .wz-block{
        display: block;
        width: 100%;
    }
    .wz-banner{
        width: 100%;

        height: 500px;
        position: relative;

    }
    .wz-bn-wrapper{
        width: 100%;
        margin: auto;
        position: relative;
    }
    .wz-bn-register{
        position: absolute;
        z-index:999;
        top:58px;
        right: 0;
    }
    .wz-main{
        width:330px;
        height: 380px;
        background-color: #fff;
        border-radius:3px ;
    }
    .wz-title{
        font-size: 18px;
        line-height: 18px;
        color: #333333;
        text-align: center;
        padding-top: 36px;
        padding-bottom: 16px;
        font-weight: bold;
    }
    .wz-form{
        width: 302px;
        margin: auto;
        font-size: 14px;
    }
    .wz-gm-cell{
        height: 40px;
        line-height: 40px;
        margin-bottom: 14px;
        cursor: pointer;
        color: #999999;
    }
    .wz-clear{
        zoom: 1;
    }
    .wz-left{
        float: left;
        margin-left: 20px;
    }
    .wz-right{
        float: right;
    }

    .wz-bn-register:before{
        content: "";
        display: block;
        width: 380px;
        height: 0px;
        background-image: url("http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/H_sign_top.png");
    }
    .wz-clear:after{
        content: "\20";
        overflow: visible;
        display: block;
        height: 0px;
        width: 100%;
        clear: both;
    }
    img{
        float: left;
        position: relative;
    }
    .carousel-inner{
        width: 1920px;
        height: 500px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        display: block;
        right: 320px;
    }
    label{
        margin-left: 10px;
    }
    #r1{
        margin-left: 10px;
    }
    #r2{
        margin-left: 50px;
    }
    #birth{
        margin-left: 30px;
        width: 200px;
        text-align: center;
    }
    #wp{
        width:200px;
        height:38px ;
        text-align: center;
    }
      #zc{
          background-image: url("http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/H_sign_btn.png");
          border-radius: 2px;
          text-align: center;
          background-repeat: no-repeat;
          width: 280px;
          height: 40px;
          display: block;
          margin: auto;
          line-height: 40px;
          color: white;
          font-size: 16px;
          font-family:黑体;
          text-decoration: none;
      }
      #dl{
          display: block;
          text-align: center;
          color: #999;
          margin-top: 6px;
          line-height: 12px;
          font-weight: normal;
          text-decoration: none;
      }
      .wz-header{
          width: 100%;
          background-color: #fff;
          height: 123px;
      }
      .wz-header .loginbox.off{
          background-image: url("http://7799520.oss-cn-hangzhou.aliyuncs.com/img/header/header.png");
          background-position: 0px -61px;
          background-repeat: no-repeat;
      }
    .wz-header .loginbox{
        height: 50px;
        width: 210px;
        margin: 48px 0 0 0;
        color: #fff;
        position: relative;
        z-index:3;
    }
      .wz-header .loginbox .lgbtn{
          top: -2px;
          left: 120px;

      }
    .wz-header .loginbox span{
        position: absolute;
        top: 4px;
        line-height: 20px;
    }
    span{
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        font-weight: normal;
    }
    .wz-header .loginbox .regbtn{
        top: -2px;
        left: 20px;
    }
      .wz-header .wz-nav-list{
          padding-top: 46px;
          padding-right: 16px;
      }
      .wz-right{
          float: right;
      }
      .wz-header .wz-nav-item.active{
        background-image: url("http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/hd_active.png");
        background-repeat: no-repeat;
          color: #fff;
      }
      .wz-header .wz-nav-item{
          padding: 0 24px;
          font-size: 14px;
          line-height: 31px;
          color: #686868;
      }

    .img-1 li {
        display: block;
        width: 815px;
        height: 447px;
    }




    .col-md-3 div li {
        width: 100%;
        height: 82px;
        border-top: 1px dotted #e3e3e3;
        display: block;
    }

    *{
        margin: 0;
        padding: 0;
    }
    .d1>img{
        position: relative;
        left: 425px;
    }

    .d3  a div{
        float: left;
        border-radius: 5px;
    }

    .d>.d3>a>.d4>div{
        float: left;
        margin: 0 14px;
    }
    .d>.d3>a>.d5>div{
        float: left;
        margin: 40px 35px;
    }
    .d4-img>img{
        transition-duration: 2s;/*设置动画持续时间2秒*/
    }
    .d4-img>img:hover{
        transform: scale(1.2);/*缩放到1.2倍*/
    }
      body {
          display: block;
          position: absolute;

      }

      body >.div-1{
          width: 100%;
          background-image: url("http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/gm_bg.jpg");
          padding-bottom: 88px;
          position: relative;
          top: 100px;
          left: 14px;
      }

      body > .div-1 > div {
          width: 1200px;
          margin: auto;

      }






      .div-2 {
          padding: 7px 0 0;

      }

      .div-ul {
          list-style-type: none;
          overflow: hidden;
          padding: 0;
      }

      .c1 {
          width: 134px;
          height: 36px;
          background-image: url("http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_menu.png");
          font-size: 15px;
          line-height: 36px;
          text-align: center;
          color: #bcbcbc;
          margin-right: 12px;
          cursor: pointer;
          float: left;
          text-decoration: none;
      }

      .c2 {
          font-size: 15px;
          line-height: 36px;
          color: #ef3d3d;
          padding-right: 10px;
          float: left;
      }

      .img-1 {
          position: relative;
          height: 447px;
          overflow: hidden;
          float: left;
          padding: 0;

      }

      .img-1 {
          text-decoration: none;
          margin-top: 30px;
      }

      .img-1 li {
          display: block;
          width: 815px;
          height: 447px;
      }

      .col-md-3 {
          width: 340px;
          float: right;
      }

      .user-1 {
          padding-bottom: 10px;
          margin-left: 50px;
      }

      #p5 {
          width: 160px;
          height: 40px;
      }

      .col-md-3 div li {
          width: 100%;
          height: 82px;
          border-top: 1px dotted #e3e3e3;
          display: block;
      }

      .wz-side-list {
          margin-left: 50px;
      }

      #p5 {
          margin-left: 80px;
      }

      .wz-side-list {
          width: 290px;

      }

      .div-img-div{
          width: 1200px;
          height: 447px;
          margin: 0;
      }
      #t6 {
          display: block;
          z-index: 3;
          overflow: hidden;
          position: absolute;
          margin-top: 380px;
          margin-left: 300px;
      }










      *{
          margin: 0;
          padding: 0;
      }
      body>.d{
          width: 1200px;
          margin: 0 auto;
          overflow: hidden;
          position: relative;
          top: 568px;
      }
      .d1>img{
          position: relative;
          left: 425px;
      }
      .d2{
          text-align: center;
          margin: 50px;
      }
      .d3  a div{
          float: left;
          border-radius: 5px;
      }
      #i1{
          width: 350px;
      }
      #i2,#i3{
          height: 300px;
      }
      .d>.d3>a>.d4>div{
          float: left;
          margin: 0 14px;
      }
      .d>.d3>a>.d5>div{
          float: left;
          margin: 40px 35px;
      }
      .d img{
          transition-duration: 2s;/*设置动画持续时间2秒*/
      }
      .d img:hover{
          transform: scale(1.2);/*缩放到1.2倍*/
      }
      .d4-img{
          overflow: hidden;
      }


      .wz-bbs{
          width: 100%;
          height: 500px;
          background-image: url(http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/bbs.jpg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          position: relative;
          top: 520px;
      }




      #zk_4 div a{
          margin-top: 10px;
      }





      .wz-title1 {
          width: 556px;
          height: 48px;
          padding-top: 100px;
      }

      .div-ul{
          position: relative;
          left: 10px;
          width: 1200px;
      }


      .a-1-1 a{
          color: white;
      }


  </style>
</head>
<body>
<div class="wz-header">
    <div class="wz-wrapper">
        <div class="wz-clear wz-position">
            <div class="wz-logo wz-left">
                <img class="wz-block" src="https://7799520.oss-cn-hangzhou.aliyuncs.com/v2/img/logo.png?m=32323" alt="">
            </div>
            <div class="loginbox wz-right off">
                <span class="lgbtn btn">登录</span>
                <span class="regbtn btn">注册账号</span>
            </div>
            <div class="wz-nav-list wz-right">
                <a href="/" class="wz-nav-item wz-left active">首页</a>
                <a href="/jiaoyou.html" class="wz-nav-item wz-left">交友</a>
                <a href="/team.html" class="wz-nav-item wz-left">服务</a>
                <a href="/address.html" class="wz-nav-item wz-left">门店</a>
            </div>
        </div>
    </div>
</div>

<form action="get">
        <div class="wz-bn-wrapper">
            <section class="container">
            <div class="wz-banner">
                <!--轮播图开始-->
                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/banner_1105.jpg" alt="First slide">
                            <div class="carousel-caption"></div>
                        </div>
                        <div class="item">
                            <img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/banner_1105.jpg" alt="Second slide">
                            <div class="carousel-caption"></div>
                        </div>
                        <div class="item">
                            <img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/banner_1105.jpg" alt="Third slide">
                            <div class="carousel-caption"></div>
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <!--轮播图结束-->
            <div class="wz-bn-register">
                <div class="wz-main">
                    <h3 class="wz-title">一分钟注册，幸福一辈子！</h3>
                    <div class="wz-form">
                        <div class="wz-gm-cell wz-clear" id="gender">
                            <div class="wz-subtit wz-left">性别</div>
                            <input type="radio" name="gender" checked value="male" id="r1">
                            <label for="r1">男</label>
                            <input type="radio" name="gender" value="female" id="r2">
                            <label for="r2">女</label><br>
                        </div>
                        <div class="wz-gm-cell wz-clear">
                            <div class="wz-subtit wz-left">生日
                                <input type="date" name="birthday" id="birth"><br>
                            </div>
                        </div>
                        <div class="wz-gm-cell wz-clear">
                            <div class="wz-subtit wz-left">工作地区
                                <select name="city" id="wp">
                                    <!--如果没有value则提交标签体的内容-->
                                    <option value="ln">辽宁</option>
                                    <option selected value="sh">上海</option>
                                    <option value="gz">广州</option>
                                </select>
                                </div>
                            </div>
                        <div class="wz-gm-cell wz-clear">
                            <div class="wz-subtit wz-left">婚姻状况
                                    <input type="radio" name="marriage" class="mm" checked>未婚
                                    <input type="radio" name="marriage" class="mm">离异
                                    <input type="radio" name="marriage" class="mm">丧偶
                            </div>
                        </div>
                        <a href="" id="zc">免费注册</a>
                        <a href="" id="dl">已有账号，立即登录</a>
                    </div>
                </div>
            </div>
        </div>
            </section>
    </div>
    <div class="wz-container"></div>
</form>


<div class="wz-title1" style="margin: auto">
    <img class="wz-block" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_title.png">
</div>


<div class="div-1">
    <div id="div1-2">
        <div class="div-1">
            <div class="div-2">
                <div class="div-3">
                    <ul class="div-ul">
                        <li><a href="#t1" class="c1">企事业单位专场</a></li>
                        <li><a href="#t2" class="c1">高端相亲专场</a></li>
                        <li><a href="#t3" class="c1">妈妈相亲团专场</a></li>
                        <li><a href="#t4" class="c1">医护人员专场</a></li>
                        <li><a href="#t5" class="c1">旅游相亲会场</a></li>
                        <a href="" class="c2">更多相亲会></a>
                        <div class="user-1">
                            <img id="p5" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_circle.png" alt="">
                        </div>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <div>
        <div class="col-md-9">
            <div class="div-img-div">
                <ul class="img-1" style="overflow: hidden">
                    <li>
                        <img id="t1" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_1_4.jpg" alt="">
                    </li>
                    <li>
                        <img id="t2" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_2_1.jpg" alt="">
                    </li>
                    <li>
                        <img id="t3" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_3_6.jpg" alt="">
                    </li>
                    <li>
                        <img id="t4" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_4_2.jpg" alt="">
                    </li>
                    <li>
                        <img id="t5" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_5_1.jpg" alt="">
                    </li>
                </ul>
                <div class="col-md-3">
                    <div class="wz-side-list wz-clear">
                        <li>
                            <div>
                                <a href=""></a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href=""></a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href=""></a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href=""></a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href=""></a>
                            </div>
                        </li>
                        <li>
                            <div>
                                <a href=""></a>
                            </div>
                        </li>
                    </div>
                </div>
                <div>
                    <a href=""><img id="t6" src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/pt_apply_btn.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="wz-bbs">
    <div skip="jiaoyou" class="wz-btn"></div>
</div>




<div class="d">
    <div class="d1"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_title.png" alt=""></div>
    <div class="d2">每天都有恋人,从这里甜蜜牵手</div>
    <div class="d3">
        <a href="">
            <div class="d4">
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_1.png" alt=""></div>
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_4.png" alt=""></div>
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_9.png" alt=""></div>
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_7.png" alt="" id="i1"></div>
            </div>
            <div class="d5">
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_2.png" alt="" id="i2"></div>
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_3.png" alt="" id="i3"></div>
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_8.png" alt=""></div>
                <div class="d4-img"><img src="http://wzlysem.oss-cn-hangzhou.aliyuncs.com/images/case_5.png" alt=""></div>
            </div>
        </a>
    </div>

</div>

<div id="zk_4" style="width: 100%;height: 150px;margin-top: 715px;text-align: center;background-color: #666">
    <div style="margin-bottom: 20px" class="a-1-1">
        <a href="">加入我们</a>
        <a href="">意见反馈</a>
        <a href="">红娘服务</a>
        <a href="">企业简介</a><br>
    </div>
    <p>
        星期一至星期天 9:00~21:00<br>
        京ICP备16053980号-5<br>
        <a style="color: white" href="http://www.tedu.cn">达内时代科技集团有限公司</a> 版权所有</p>
    </p>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>